<template>
  <a-card :loading="loading" :bordered="false">
    <!-- 业务表单 -->
    <a-form :form="form" style="margin-top: 8px">

      <!-- 流程定义名称 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="流程定义名称">
        <a-input
          placeholder="请输入流程定义名称"
          v-decorator="[
            'processName',
            {
              initialValue: formData.processName,
              rules: [{ required: true, message: '请输入流程定义名称！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['processName']"
        />
      </a-form-item>

      <!-- 流程定义key -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="流程定义key">
        <a-input
          placeholder="请输入流程定义key"
          v-decorator="[
            'processKey',
            {
              initialValue: formData.processKey,
              rules: [{ required: true, message: '请输入流程定义key！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['processKey']"
        />
      </a-form-item>

      <!-- 业务名称 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="业务名称">
        <a-input
          placeholder="请输入业务名称"
          v-decorator="[
            'bizName',
            {
              initialValue: formData.bizName,
              rules: [{ required: true, message: '请输入业务名称！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['bizName']"
        />
      </a-form-item>
      <!-- 业务表 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="业务表">
        <a-input
          placeholder="请输入业务表"
          v-decorator="[
            'relatedTable',
            {
              initialValue: formData.relatedTable,
              rules: [{ required: true, message: '请输入业务表！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['relatedTable']"
        />
      </a-form-item>
      <!-- 业务处理界面 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="业务处理界面">
        <a-input
          placeholder="请输入业务处理界面"
          v-decorator="[
            'bizUrl',
            {
              initialValue: formData.bizUrl,
              rules: [{ required: true, message: '请输入业务处理界面！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['bizUrl']"
        />
      </a-form-item>

      <!-- 标题表达式 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="标题表达式">
        <a-input
          placeholder="请输入标题表达式"
          v-decorator="[
            'titleExpression',
            {
              initialValue: formData.titleExpression,
              rules: [{ required: true, message: '请输入标题表达式！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['titleExpression']"
        />
      </a-form-item>

      <!-- 优先级 -->
      <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="优先级">
        <a-input
          placeholder="请输入优先级"
          v-decorator="[
            'priority',
            {
              initialValue: formData.priority,
              rules: [{ required: true, message: '请输入优先级！' }]
            }
          ]"
          :disabled="!editable || editableFiexd['priority']"
        />
      </a-form-item>

    </a-form>
  </a-card>
</template>

<script>
import JDate from '@/components/jeecg/JDate.vue'
import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { httpAction, getAction } from '@/api/manage'
import pick from 'lodash.pick'
export default {
  name: 'ProcessBind',
  components: {
    JDate,
    JSelectDepart,
    JDictSelectTag,
    JSelectMultiUser,
    XSelectUserByDep
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    editable: {
      type: Boolean,
      default: true
    },
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      loading: true, //数据加载
      url: {
        add: '/workflow/processBind/add',
        edit: '/workflow/processBind/add',
        queryById: '/workflow/processBind/queryById'
      },
      form: this.$form.createForm(this), //表单
      formData: {}, //数据
    }
  },
  created() {
    if (this.dataId) {
      this.getData(id)
    }
  },
  methods: {
    add(data) {
      this.loading = false
      this.open(data)
    },
    edit(record) {
      this.open(record)
    },
    open(record) {
      this.form.resetFields()
      this.formData = Object.assign({}, record)
      if(record.id){
        this.getData(record.id)
      }
    },
    getData(id){
      this.loading = true
      getAction(this.url.queryById,{ id }).then(res => {
        this.loading = false
        this.formData = res.result||{}
        this.$nextTick(() => {
          this.form.setFieldsValue(
            pick(this.formData, 'bizName','bizUrl','priority','processKey', 'processName', 'relatedTable', 'titleExpression')
          )
        })
      }).finally(()=>{
        this.loading = false
      })
    },
    submitForm() {
      const that = this
      return new Promise((resolve, reject) => {
        // 触发表单验证
        that.form.validateFields((err, values) => {
          if (!err) {
            let httpurl = ''
            let method = ''
            if (!that.formData.id) {
              httpurl += that.url.add
              method = 'post'
            } else {
              httpurl += that.url.add
              method = 'post'
            }
            let formData = Object.assign(that.formData, values)

            httpAction(httpurl, formData, method)
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve(res)
                } else {
                  that.$message.warning(res.message)
                  reject(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          }
        })
      })
    }
  }
}
</script>

<style></style>
